<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="card_top_padding no_need_padding" style="padding-bottom: 20px">
      <a-tabs v-model="activeKey">
        <a-tab-pane key="store_apply_agreement" tab="店铺入驻协议"> </a-tab-pane>
        <a-tab-pane key="cloud_apply_agreement" tab="采购申请协议"> </a-tab-pane>
        <a-tab-pane key="cloud_supplier_apply_agreement" tab="供货商申请协议"> </a-tab-pane>
        <a-tab-pane key="area_agent_apply_agreement" tab="区域管理申请协议"> </a-tab-pane>
        <a-tab-pane key="bd_agent_apply_agreement" tab="推广代理申请协议"> </a-tab-pane>
        <a-tab-pane key="goods_agent_apply_agreement" tab="产品代理社区内协议"> </a-tab-pane>
      </a-tabs>

      <a-form-model :labelCol="{ span: 3 }" :wrapperCol="{ span: 12 }">
        <a-form-model-item label="协议内容">
          <WangEditor
            v-if="activeKey === 'store_apply_agreement'"
            :autoFocus="true"
            :zIndex="1"
            :value="store_apply_agreement"
            @change="(val) => onDescribeChange(val, 'store_apply_agreement')"
          ></WangEditor>
          <WangEditor
            v-if="activeKey === 'cloud_apply_agreement'"
            :autoFocus="true"
            :zIndex="1"
            :value="cloud_apply_agreement"
            @change="(val) => onDescribeChange(val, 'cloud_apply_agreement')"
          ></WangEditor>
          <WangEditor
            v-if="activeKey === 'cloud_supplier_apply_agreement'"
            :autoFocus="true"
            :zIndex="1"
            :value="cloud_supplier_apply_agreement"
            @change="(val) => onDescribeChange(val, 'cloud_supplier_apply_agreement')"
          ></WangEditor>
          <WangEditor
            v-if="activeKey === 'area_agent_apply_agreement'"
            :autoFocus="true"
            :zIndex="1"
            :value="area_agent_apply_agreement"
            @change="(val) => onDescribeChange(val, 'area_agent_apply_agreement')"
          ></WangEditor>
          <WangEditor
            v-if="activeKey === 'bd_agent_apply_agreement'"
            :autoFocus="true"
            :zIndex="1"
            :value="bd_agent_apply_agreement"
            @change="(val) => onDescribeChange(val, 'bd_agent_apply_agreement')"
          ></WangEditor>
          <WangEditor
            v-if="activeKey === 'goods_agent_apply_agreement'"
            :autoFocus="true"
            :zIndex="1"
            :value="goods_agent_apply_agreement"
            @change="(val) => onDescribeChange(val, 'goods_agent_apply_agreement')"
          ></WangEditor>
        </a-form-model-item>

        <div style="display: flex; justify-content: center">
          <a-button :loading="btnLoading" type="primary" @click="submit" style="margin-right: 8px"> 保存 </a-button>
          <a-button @click="$router.back()"> 取消 </a-button>
        </div>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { WangEditor } from '@/components'
import { newGetSaasProtocol, newSetSaasProtocol } from '@/api/saas/setting'

export default {
  name: 'SaasAgreement',
  components: {
    WangEditor,
  },
  data() {
    return {
      activeKey: 'store_apply_agreement',
      cloud_apply_agreement: '', // 采购申请协议
      cloud_supplier_apply_agreement: '', // 供货商入驻协议
      store_apply_agreement: '', // 店铺入驻协议
      area_agent_apply_agreement: '', // 区域管理入驻协议
      bd_agent_apply_agreement: '', // 推广代理入驻协议
      goods_agent_apply_agreement: '', // 产品代理入驻协议
      btnLoading: false,
    }
  },
  methods: {
    onDescribeChange(val, el) {
      this[el] = val
    },

    async submit() {
      const {
        area_agent_apply_agreement,
        bd_agent_apply_agreement,
        cloud_apply_agreement,
        cloud_supplier_apply_agreement,
        goods_agent_apply_agreement,
        store_apply_agreement,
      } = this

      this.btnLoading = true
      const res = await newSetSaasProtocol({
        area_agent_apply_agreement,
        bd_agent_apply_agreement,
        cloud_apply_agreement,
        cloud_supplier_apply_agreement,
        goods_agent_apply_agreement,
        store_apply_agreement,
      })
      this.btnLoading = false

      if (!res.code) return this.$message.success('保存成功')

      this.$message.error(res.msg)
    },
  },

  async created() {
    const res = await newGetSaasProtocol()
    if (!res.code) {
      let {
        area_agent_apply_agreement,
        bd_agent_apply_agreement,
        cloud_apply_agreement,
        cloud_supplier_apply_agreement,
        goods_agent_apply_agreement,
        store_apply_agreement,
      } = res.data

      this.area_agent_apply_agreement = area_agent_apply_agreement
      this.bd_agent_apply_agreement = bd_agent_apply_agreement
      this.cloud_apply_agreement = cloud_apply_agreement
      this.cloud_supplier_apply_agreement = cloud_supplier_apply_agreement
      this.goods_agent_apply_agreement = goods_agent_apply_agreement
      this.store_apply_agreement = store_apply_agreement
    }
  },
}
</script>

<style scoped></style>
